<template>
    <el-card class="my-card">
        <div class="steps-actions">
            <el-button @click="moveStep(-1)" :disabled="currentStep === 0">上一步</el-button>
            <el-button @click="moveStep(1)" :disabled="currentStep === steps.length - 1">下一步</el-button>
        </div>
        <!-- 步骤指示器 -->
        <el-steps :active="currentStep" align-center finish-status="success">
            <el-step v-for="step in steps" :key="step.label" :title="step.label"></el-step>
        </el-steps>

        <!-- <component :is="steps[currentStep].component"></component> -->
        <!-- 动态加载当前步骤对应的组件 -->
        <div class="component-container">
            <component :is="currentComponent" v-if="currentComponent" />
        </div>

    </el-card>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, defineAsyncComponent } from 'vue';
// 使用 defineAsyncComponent 和动态引入方式加载步骤组件
const Step1 = defineAsyncComponent(() => import('./Step1.vue'));
const Step2 = defineAsyncComponent(() => import('./Step2.vue'));
const Step3 = defineAsyncComponent(() => import('./Step3.vue'));
const Step4 = defineAsyncComponent(() => import('./Step4.vue'));
const Step5 = defineAsyncComponent(() => import('./Step5.vue'));
const Step6 = defineAsyncComponent(() => import('./Step6.vue'));
const Step7 = defineAsyncComponent(() => import('./Step7.vue'));
const Step8 = defineAsyncComponent(() => import('./Step8.vue'));
const Step9 = defineAsyncComponent(() => import('./Step9.vue'));
const Step10 = defineAsyncComponent(() => import('./Step10.vue'));

const state = reactive({
    currentStep: 0,
    steps: [{ label: '新建工作组', component: Step1 },
    { label: '视频上传', component: Step2 },
    { label: '提取原视频单帧', component: Step3 },
    { label: '提取目标视频单帧', component: Step4 },
    { label: '提取原视频人脸', component: Step5 },
    { label: '提取目标视频人脸', component: Step6 },
    { label: '训练模型', component: Step7 },
    { label: '人脸替换', component: Step8 },
    { label: '导出视频', component: Step9 },
    { label: '下载视频', component: Step10 }],
});

// 从响应式状态中提取引用以在模板中使用
const { currentStep, steps } = toRefs(state);
const currentComponent = computed(() => steps.value[currentStep.value].component);

// 挂载时的操作
onMounted(() => {

});

// 移动步骤的函数
const moveStep = (direction) => {
    const nextStep = state.currentStep + direction;
    // 确保步骤在有效范围内
    if (nextStep >= 0 && nextStep < steps.value.length) {
        state.currentStep = nextStep;
    }
};
</script>

<style lang="scss" scoped>
.job-form {
    max-width: 400px;
    /* 设置表单的最大宽度 */
    margin: 0 auto;
    /* 水平居中 */
}

.my-card {
    padding: 20px;
    /* 增加卡片的内边距 */
    overflow-y: scroll;
    /* 始终显示垂直滚动条 */
}

.component-container {
    max-height: 70vh;
    /* 让内容区域占用所有可用空间 */
    overflow-y: auto;
    /* 内容过长时允许滚动 */
}

.steps-actions {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px; /* 增加步骤按钮下方的间距 */
}
</style>
